/*
 * @FilePath: Buildinfo.js
 * @Author: 杜芬
 * @Date: 2024-05-09 14:48:24
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-05-09 22:31:31
 * Copyright: 2024 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 页面
 */
// 2D 物体
// 2D 物体 - 建筑信息
import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';

export class BuildInfo {
  constructor(scene,center, dataObj) {
    this.scene = scene
    this.center = center
    this.dataObj = dataObj

    this.list = [] // 保存名字和信息的2个 2D 物体

    this.createNameDiv()
    this.createInfoDiv()
  }
  // 创建 建筑名称 2D 物体
  createNameDiv() {
    const nameDiv = document.querySelector('#tag-1')
    nameDiv.innerHTML = this.dataObj.name // 建筑名称
    // 标签虽然有 diasplay : none； 但是转化成2D物体后，会在2D渲染器中直接显示
    const nameObject = new CSS2DObject(nameDiv)
    nameObject.position.set(this.center.x, this.center.y + 10, this.center.z)
    this.scene.add(nameObject)
    this.list.push(nameObject)

    // nameDiv.addEventListener('click',this.center.bind(this))
  }
   // 创建 建筑信息 2D 物体
  createInfoDiv() {
    const InfoDiv = document.querySelector("#tag-2")
    InfoDiv.style.pointerEvents = 'all'  // 让这个标签接受鼠标交互
    const { squareMeters, accommodate, officesRemain, parkingRemain } = this.dataObj
    const textHtml = `
    <div>总平米数： ${squareMeters}</div>
    <div>容纳人数： ${accommodate}</div>
    <div>可出租位： ${officesRemain}</div>
    <div>空余车位： ${parkingRemain}</div>
      `
      InfoDiv.innerHTML = textHtml

    const infoObject = new CSS2DObject(InfoDiv)
    infoObject.position.set(this.center.x, this.center.y + 5, this.center.z)
    this.scene.add(infoObject)
    this.list.push(infoObject)

    // DOM 点击事件 =>隐藏建筑物信息标签
    // InfoDiv.addEventListener('click', this.clear.bind(this))
    InfoDiv.addEventListener('click', (e) => {
      e.stopPropagation()
      this.clear.call(this)
    })
  }

  // 隐藏物体
  clear() {
    this.list.forEach(obj => obj.visible = false)
  }
}